<template>
  <div>
    <el-form ref="form"
             :model="newActivity">
      <el-form-item label="活动标题">
        <el-input v-model="newActivity.name"></el-input>
      </el-form-item>
      <el-form-item label="活动地点">
        <el-input v-model="newActivity.address"></el-input>
      </el-form-item>
      <el-form-item label="活动内容">
        <el-input v-model="newActivity.content"
                  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker v-model="newActivity.datetime"
                        type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动图片">
        <el-upload class="avatar-uploader"
                   action="http://192.168.11.18:8080/file/uploadImage"
                   :show-file-list="false"
                   :on-success="getUploadFileName">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <div id="action">
      <el-button type="info"
                 size="mini"
                 @click="cancel">取消</el-button>
      <el-button type="danger"
                 size="mini"
                 @click="commit">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    community: {}
  },
  data () {
    return {
      newActivity: {                //用于装新添的活动数据
        uid: "",                   //发起者id（该物管id）
        cid: "",                   //小区id
        name: "",                   //活动标题
        address: "",                //活动地点
        content: "",                //活动内容
        datetime: new Date(2021, 0, 1, 9, 0),   //活动时间
        image: ""                    //活动图片
      },
      imageUrl: '',
    }
  },
  methods: {
    //获取上传图片名称
    getUploadFileName (res) {
      this.imageUrl = res;
      this.newActivity.image = res;
      console.log(res)
    },
    cancel () {
      //通知父组件关闭对话框
      this.$emit("closedialog", { result: false, data: {} });
    },
    commit () {
      //格式化时间格式
      let seperator1 = "-";
      let seperator2 = ":";
      let month = this.newActivity.datetime.getMonth() + 1;
      let strDate = this.newActivity.datetime.getDate();
      let hours = this.newActivity.datetime.getHours();
      let minutes = this.newActivity.datetime.getMinutes();
      let seconds = this.newActivity.datetime.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }

      let formatTime = this.newActivity.datetime.getFullYear() + seperator1 + month + seperator1 + strDate
        + " " + hours + seperator2 + minutes + seperator2 + seconds;

      //修改时间
      this.newActivity.datetime = formatTime;
      //发起者id
      this.newActivity.uid = this.community.wid;
      //小区id
      this.newActivity.cid = this.community.id;
      console.log("111111111111");
      console.log(this.newActivity);
      //关闭对话框并提交数据
      this.$emit("closedialog", { result: true, data: this.newActivity });
    }
  },
  //当前组件创建完毕时
  mounted () {
    console.log(this.community);
  }
}
</script>

<style scoped>
#action {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>